/**
 * Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
 * All Rights Reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are NOT permitted except as agreed by
 * iAuto (Shanghai) Co., Ltd.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 */

import React, { useCallback, useMemo } from 'react';
import { Slider, Row, Col } from 'antd';

import ColorSlider from '../ColorSlider';
import { IBlockDataType } from '@/lib/custom-extension';

interface ISeekBar {
  visible?: boolean;
  value: number;
  colorSlider?: boolean;
  dataType?: IBlockDataType;
  onChange?: (value: number) => void;
}

const SeekBar: React.FC<ISeekBar> = (props) => {
  const { value, colorSlider = false, dataType, onChange, visible } = props;

  const seekbarState = useMemo(() => {
    const [min, max] = dataType?.value?.split('~') || [];
    return {
      ...dataType,
      min: Number(min),
      max: Number(max),
    };
  }, [dataType]);

  const formatter = useCallback(
    (value?: number): React.ReactNode => {
      return (
        <div className="formatter">
          {value} {dataType?.unit}
        </div>
      );
    },
    [dataType],
  );

  return (
    <>
      <Row style={{ display: 'flex', alignItems: 'center', marginTop: 50 }}>
        <Col span={3} style={{ textAlign: 'center' }}>
          {seekbarState?.min} {seekbarState.unit}
        </Col>
        <Col flex={1}>
          {colorSlider ? (
            <ColorSlider
              min={seekbarState?.min}
              max={seekbarState?.max}
              onChange={onChange}
              value={value}
              step={seekbarState?.step || 1}
              tooltipVisible={visible}
              tipFormatter={formatter}
            />
          ) : (
            <Slider
              min={seekbarState?.min}
              max={seekbarState?.max}
              onChange={onChange}
              value={value}
              step={seekbarState?.step || 1}
              tooltipVisible={visible}
              tipFormatter={formatter}
            />
          )}
        </Col>
        <Col span={3} style={{ textAlign: 'center' }}>
          {seekbarState?.max} {seekbarState.unit}
        </Col>
      </Row>
    </>
  );
};

export default SeekBar;
